<template>
    <fullscreen ref="fullscreen" @change="fullscreenChange" style="height: 100%;">
        <div class="gisplus-bg">
            <!--标题-->
            <div class="gisplus-title">
                <Logo1></Logo1>
                <div class="gisplus-durationTime">
                    安全施工：
                    <span style="color: #ffeb3b">
                    {{durationTime}}
                </span>
                </div>
                <div class="gisplus-titles">
                    <p class="gis-titles">{{$route.meta.title}}</p>
                    <p class="gis-titles-min"><i class="iconfont icon-dizhi"></i>海南省<i class="iconfont icon-dian2"
                                                                                       style="margin: 0"></i>儋州市</p>
                </div>
                <div class="weather">
                    {{nowtime}}
                    {{weather.weather}}
                    {{weather.temperature}}℃
                </div>
            </div>
            <!--左边-->
            <div class="gisplus-box-left flex-column-center">

                <div class="gisplus-box">
                    <div class="gisplus-box-title">
                        <div class="gisplus-box-title-left"></div>
                        <p>人员管理</p>
                        <router-link to="/gisview1" class="gisplus-box-title-jump">查看详情</router-link>
                    </div>
                    <div class="text-container">
                        <div style="display:flex">
                            <echarts id="mainpages2" :option="view1_2_data" :styles="mainpages2"></echarts>
                            <div style="width: 2rem;height:1.6rem;color: #37a2da;">

                                <div style="margin-bottom: 25px">现场人员数量</div>
                                <div>中心实验室：<span style="color: #F8BC38;">1000人/次</span></div>
                                <div>监理单位：<span style="color: #F8BC38;">1000人/次</span></div>
                                <div>施工单位：<span style="color: #F8BC38;">1000人/次</span></div>
                                <div>指挥部：<span style="color: #F8BC38;">1000人/次</span></div>
                            </div>
                        </div>
                        <echarts id="mainpages22" :option="view1_3_data" :styles="mainpages22"></echarts>
                    </div>
                </div>

                <div class="gisplus-box">
                    <div class="gisplus-box-title">
                        <div class="gisplus-box-title-left"></div>
                        <p>安全/环保问题</p>
                        <router-link to="/anbao" class="gisplus-box-title-jump">查看详情</router-link>
                    </div>
                    <div class="text-container">
                        <echarts id="aqhbwt" :option="aqhbwt_data" :styles="styles"></echarts>
                    </div>
                </div>

                <div class="gisplus-box">
                    <div class="gisplus-box-title">
                        <div class="gisplus-box-title-left"></div>
                        <p>项目概况</p>
                        <router-link to="/overviews" class="gisplus-box-title-jump">查看详情</router-link>
                    </div>
                    <div class="text-container">
                        <div class="gis-table">
                            <table>
                                <tbody>
                                <tr>
                                    <td>路线全长</td>
                                    <td>36.024km</td>
                                    <td><i class="cursor iconfont icon-zhongxindongtai" @click="changeMap('empty')"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td>互通立交</td>
                                    <td>4处</td>
                                    <td><i class="cursor iconfont icon-hutonglijiao" @click="changeMap('hutong')"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td>服务区</td>
                                    <td>1处</td>
                                    <td><i class="cursor iconfont icon-map-service" @click="changeMap('fuwuqu')"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td>桥梁</td>
                                    <td>6297m/18座</td>
                                    <td><i class="cursor iconfont icon-qiaoliang" @click="changeMap('qiao')"></i></td>
                                </tr>
                                <tr>
                                    <td>隧道</td>
                                    <td>3522m/4座</td>
                                    <td><i class="cursor iconfont icon-suidao" @click="changeMap('sui')"></i></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--中间-->
            <div class="gisplus-box-mid flex-column-center">
                <div class="gisplus-box" style="flex: 2;display: flex;flex-direction: column">
                    <div class="gisplus-box-title">
                        <div class="gisplus-box-title-left"></div>
                        <p>电子沙盘</p>
                        <div class="gisplus-box-title-jump" @click="fullScreenFour">
                            <i class="iconfont icon-quanping" v-if="!fullscreen"></i>
                            <i class="iconfont icon-tuichuquanping" v-else></i>
                        </div>
                    </div>
                    <iframe src="http://baisha.checcbim.com/gis/index.html?config=http://gis.checcbim.com/baisha/config.json"
                            frameborder="0"
                            class="gisplus-iframe"
                            id="gisplusiframe"></iframe>
                </div>
                <div class="gisplus-box">
                    <div class="text-container">
                        <!--                        <VideoListm></VideoListm>-->


                    </div>
                </div>
            </div>
            <!--右边-->
            <div class="gisplus-box-right flex-column-center">
                <div class="gisplus-box">
                    <div class="gisplus-box-title">
                        <div class="gisplus-box-title-left"></div>
                        <p>进度管理</p>
                        <router-link to="/datasource" class="gisplus-box-title-jump">查看详情</router-link>
                    </div>
                    <div class="text-container">
                        <!--                        <echarts id="jindu" :option="jindu_data" :styles="styles"></echarts>-->
                        <echarts id="mainpages1" :option="view1_1_data" :styles="mainpages1"></echarts>
                    </div>
                </div>
                <div class="gisplus-box">
                    <div class="gisplus-box-title">
                        <div class="gisplus-box-title-left"></div>
                        <p>质量问题</p>
                        <router-link to="/qualitis" class="gisplus-box-title-jump">查看详情</router-link>
                    </div>
                    <div class="text-container">
                        <echarts id="zhiliangwenti" :option="zhiliang_data" :styles="styles"></echarts>
                    </div>
                </div>
                <div class="gisplus-box">
                    <div class="gisplus-box-title">
                        <div class="gisplus-box-title-left"></div>
                        <p>绿色施工</p>
                        <!--                        <router-link to="/gisview2" class="gisplus-box-title-jump">查看详情</router-link>-->
                    </div>
                    <div class="text-container">
                        <div class="gis-table renyuan-box">
                            <table>
                                <thead>
                                <tr>
                                    <th style="width: 25%;">环境监测点</th>
                                    <th style="width: 25%;">监测结果</th>
                                    <th style="width: 25%;">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(p,index) in huanjing" :key="index">
                                    <td>{{p.name}}</td>
                                    <td>{{p.result}}</td>
                                    <td>
                                        <a href="#"
                                           style="color: #F8BC38;"
                                           @click="openNewWindow(p.url)">查看详情</a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--            <div class="gisplus-foot">-->
            <!--                <el-row>-->
            <!--                    <el-col :span="8">-->
            <!--                        <div class="grid-content bg-purple" style="padding-left: 0.2rem">-->
            <!--                            © 2019 中国公路工程咨询集团有限公司-->
            <!--                        </div>-->
            <!--                    </el-col>-->
            <!--                    <el-col :span="8">-->
            <!--                        <div class="grid-content bg-purple-light" style="text-align: center">-->
            <!--                            技术支持：中国公路工程咨询集团有限公司BIM技术中心-->
            <!--                        </div>-->
            <!--                    </el-col>-->
            <!--                    <el-col :span="8">-->
            <!--                        <div class="grid-content bg-purple">-->
            <!--                        </div>-->
            <!--                    </el-col>-->
            <!--                </el-row>-->
            <!--            </div>-->
        </div>
    </fullscreen>
</template>

<script>
    import echarts from '@/components/echarts/echarts.vue'
    import Logo1 from '@/components/Logo1.vue'
    import VideoListm from '@/components/Video/VideoListm.vue'

    export default {
        name: 'gisplus',
        data() {
            return {
                // 安全
                anquan: {
                    overdue: 0,
                    processed: 0,
                    sum: 0,
                    untreated: 0
                },
                //环保
                huanbao: {
                    overdue: 0,
                    processed: 0,
                    sum: 0,
                    untreated: 0
                },
                // 质量问题
                zhiliang: {
                    overdue: 0,
                    processed: 0,
                    sum: 0,
                    untreated: 0
                },
                // 进度
                jindu: {
                    jhwc: 0,
                    sjwc: 0,
                    unfinished: 0
                },
                // 公用样式
                styles: {
                    width: '4rem',
                    height: '2.1rem',
                    margin: '0 auto'
                },
                mainpages1: {
                    width: '5rem',
                    height: '3rem',
                    margin: '0 auto'
                },
                mainpages2: {
                    width: '3rem',
                    height: '1.6rem',
                    margin: '0 auto'
                },
                mainpages22: {
                    width: '5rem',
                    height: '1.4rem',
                    margin: '0 auto'
                },
                // 人员
                option4: {
                    color: ['#37a2da', '#ffdb5c', '#fb7292', '#8378ea'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['在岗管理人员', '请假管理人员', '在岗劳务人员', '当前隧道内施工人员'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:
                        {
                            type: 'category',
                            data: ['人数'],
                            axisLine: {
                                lineStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                    yAxis:
                        {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                    series: [
                        {
                            name: '在岗管理人员',
                            type: 'bar',
                            barWidth: 30,
                            stack: '管理人员',
                            data: [276]
                        },
                        {
                            name: '请假管理人员',
                            type: 'bar',
                            stack: '管理人员',
                            data: [0]
                        },
                        {
                            name: '在岗劳务人员',
                            type: 'bar',
                            // barGap: 0,
                            barWidth: 30,
                            data: [856]
                        },
                        {
                            name: '当前隧道内施工人员',
                            type: 'bar',
                            barWidth: 30,
                            data: [13],
                        }
                    ]
                },
                // 绿色施工
                huanjing: [
                    {
                        name: '阜龙站点',
                        result: '合格',
                        url: 'http://baisha.checcbim.com/video/indexfu.html'
                    },
                    {
                        name: '一分部',
                        result: '合格',
                        url: 'http://baisha.checcbim.com/video/indexyi.html'
                    },
                    {
                        name: '牙叉隧道',
                        result: '合格',
                        url: 'http://baisha.checcbim.com/video/indexyacha.html'
                    },
                ],
                // 进度
                view1_1: {
                    name: [],
                    finshed: [],
                    sum: [],
                },
                durationTime: '',
                nowtime: '',
                weather: {},
                mapArray: {
                    hutong: false,
                    fuwuqu: false,
                    qiao: false,
                    sui: false,
                },
                fullscreen: false
            }
        },
        mounted() {
            let that = this
            that.currentWeather()
            that.getGisplus()
            that.getCzjd()
            setInterval(function () {
                let oldTime = new Date('2018-03-12 00:00:00')
                let nowTime = new Date()
                let durationTime = nowTime.getTime() - oldTime.getTime()
                let d = Math.floor(durationTime / 1000 / 60 / 60 / 24)
                let h = Math.floor(durationTime / 1000 / 60 / 60) % 24
                let m = Math.floor(durationTime / 1000 / 60) % 60
                let s = Math.floor(durationTime / 1000) % 60
                that.durationTime = d + '天' + h + '时' + m + '分' + s + '秒'
                that.nowtime = nowTime.Format('yyyy-MM-dd hh:mm:ss')
            }, 1000)

        },
        components: {
            echarts, Logo1, VideoListm
        },
        computed: {
            //安全环保
            aqhbwt_data() {
                return {
                    tooltip: {
                        show: true,
                    },
                    series: {
                        type: 'sunburst',
                        data: [
                            {
                                name: '安全问题',
                                itemStyle: {
                                    color: '#9dc2e6'
                                },
                                children: [
                                    {
                                        name: '已解决',
                                        value: this.anquan.processed,
                                        itemStyle: {
                                            color: '#0269b9'
                                        },
                                    },
                                    {
                                        name: '未解决',
                                        value: this.anquan.untreated,
                                        itemStyle: {
                                            color: '#6cbaf7'
                                        },
                                    }
                                ]
                            },
                            {
                                name: '环保问题',
                                itemStyle: {
                                    color: '#18c434'
                                },
                                children: [
                                    {
                                        name: '已解决',
                                        value: this.huanbao.processed,
                                        itemStyle: {
                                            color: '#01981a'
                                        },
                                    },
                                    {
                                        name: '未解决',
                                        value: this.huanbao.untreated,
                                        itemStyle: {
                                            color: '#82e191'
                                        },
                                    },
                                ]
                            }
                        ],
                        radius: [0, '90%'],
                        label: {
                            rotate: 'tangential'
                        },
                        levels: [
                            {
                                // 留给数据下钻点的空白配置
                            },
                            {
                                //中环
                                r0: '20%',
                                r: '65%',
                            },
                            {
                                //外环
                                r0: '65%',
                                r: '90%',
                            },
                        ]
                    }
                }
            },
            //质量
            zhiliang_data() {
                return {
                    tooltip: {
                        show: true,
                    },
                    series: {
                        type: 'sunburst',
                        data: [
                            {
                                name: '质量问题',
                                itemStyle: {
                                    color: '#ee9135'
                                },
                                children: [
                                    {
                                        name: '已解决', value: this.zhiliang.processed, itemStyle: {
                                            color: '#dd7711'
                                        }
                                    },
                                    {
                                        name: '未解决', value: this.zhiliang.untreated, itemStyle: {
                                            color: '#f6b370'
                                        }
                                    }
                                ]
                            },
                        ],
                        radius: [0, '90%'],
                        label: {
                            rotate: 'tangential'
                        },
                        levels: [
                            {
                                // 留给数据下钻点的空白配置
                            },
                            {
                                //中环
                                r0: '20%',
                                r: '65%',
                            },
                            {
                                //外环
                                r0: '65%',
                                r: '90%',
                            },
                        ]
                    }
                }
            },
            //进度
            jindu_data() {
                return {
                    color: ['#00baad', '#ff8d1a'],
                    title: {
                        text: '2019年进度产值',
                        x: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['已完成', '待完成'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            label: {
                                normal: {
                                    formatter: '{b|{b}} \n{c|{c}} \n{per|{d}%}  ',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    // shadowBlur:3,
                                    // shadowOffsetX: 2,
                                    // shadowOffsetY: 2,
                                    // shadowColor: '#999',
                                    padding: [0, 7],
                                    rich: {
                                        b: {
                                            fontSize: 14,
                                            lineHeight: 18,
                                            width: '100%',
                                            color: '#fff',
                                            align: 'left',
                                        },
                                        c: {
                                            fontSize: 14,
                                            lineHeight: 18,
                                            align: 'left',
                                        },
                                        per: {
                                            color: '#eee',
                                            width: '100%',
                                            padding: [2, 4],
                                            borderRadius: 2,
                                            align: 'left',
                                        }
                                    }
                                }
                            },
                            name: '完成情况',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: this.jindu.sjwc, name: '已完成'},
                                {value: this.jindu.unfinished, name: '待完成'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            },
            // 人员饼图
            view1_2_data() {
                let data = [{value: 276, name: '中心实验室'},
                    {value: 22, name: '监理单位'},
                    {value: 856, name: '施工单位'},
                    {value: 13, name: '指挥部'}]
                return {
                    title: {
                        text: '参建人员统计',
                        left: 10,
                        top: 0,
                        textStyle: {
                            color: '#37a2da',
                            fontSize: 16
                        }
                    },
                    graphic: {       //图形中间文字
                        type: "text",
                        left: '56%',
                        top: '45%',
                        bottom: 0,
                        style: {
                            text: '总人数:' + (276 + 22 + 856 + 13),
                            textAlign: "center",
                            fill: "#fff",
                            fontSize: 16
                        }
                    },
                    color: ['#37a2da', '#ffdb5c', '#fb7292', '#8378ea'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 0,
                        top: '30%',
                        textStyle: {
                            color: '#fff',
                            fontSize: '14'
                        },
                        formatter: function (name) {
                            console.log(name);
                            let index
                            data.forEach(function (value, i) {
                                if (value.name == name) {
                                    index = i;
                                }
                            });
                            return name + ':' + data[index].value;
                        },
                    },
                    series: [
                        {
                            name: '人数',
                            type: 'pie',
                            center: ['70%', '50%'],
                            radius: ['60%', '80%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: data
                        }
                    ]
                }
            },
            // 进度
            view1_1_data() {
                let that = this
                let data = []
                for (let i = 0; i < this.view1_1.name.length; i++) {
                    data.push(this.view1_1.finshed[i] / this.view1_1.sum[i])
                }
                return {
                    tooltip: {
                        show: false,
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (param) {
                            return false;
                        }
                    },
                    grid: { //设置网格属性
                        // show:true,
                        left: '130', //网格距离容器左侧的距离
                        right: '0', //网格距离容器右侧的距离
                        top: '10', //网格距离容器右侧的距离
                        bottom: '0', //网格距离容器右侧的距离
                        borderWidth: 1,
                        containLabel: false
                    },
                    xAxis: {
                        type: 'value',
                        show: false,
                        axisTick: { //去掉刻度
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#19358d",
                                width: 1
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: [
                        {
                            inverse: true,
                            type: 'category',
                            axisTick: { //去掉刻度
                                show: false
                            },
                            interval: 5,
                            splitNumber: 8,
                            inside: 'true',
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 16,
                                    fontFamily: 'Times New Roman',
                                },
                            },
                            axisLine: {
                                show: false
                            },
                            data: that.view1_1.name
                        },
                        {
                            inverse: true,
                            type: 'category',
                            interval: 5,
                            axisTick: { //去掉刻度
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            splitNumber: 8,
                            data: ['', '', '', '', '', '', '', '', '']
                        }],
                    series: [
                        { /*背景图*/
                            name: '总数',
                            type: 'bar',
                            yAxisIndex: 1,
                            silent: true,
                            itemStyle: {
                                normal: {
                                    show: true,
                                    color: '#1a349a',
                                    barBorderRadius: 50,
                                    borderWidth: 0,
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideTopRight',
                                    offset: [0, -22],
                                    formatter: function (param) {
                                        let index = param.dataIndex
                                        let relVal = Number(that.view1_1.finshed[index]).toFixed(2) + '/' + Number(that.view1_1.sum[index]).toFixed(2);
                                        return relVal;
                                    },
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 14
                                    }
                                }
                            },
                            barWidth: 10,
                            barGap: '20%',
                            data: [1, 1, 1, 1, 1, 1, 1, 1, 1]
                        },
                        {
                            name: '已完成',
                            type: 'bar',
                            barWidth: 10,
                            nameTextStyle: {
                                width: 20,
                                fontSize: 14,
                                fontFamily: "Times New Roman",
                                borderColor: '#51bbfe',
                                borderWidth: 1,
                                backgroundColor: '#022453',
                                color: '#fff',
                                padding: [4, 5, 4, 165],
                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 5,
                                    color: '#ffdb5c'
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    formatter: function (param) {
                                        return (param.data * 100).toFixed(1) + '%';
                                    },
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12
                                    }
                                }
                            },
                            barGap: '20%',
                            data: data
                        },
                    ]
                }
            },
            // 人员考勤
            view1_3_data() {
                return {
                    title: {
                        text: '人员考勤(人)',
                        left: 10,
                        top: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        x: 'center',
                    },
                    legend: {
                        right: 0,
                        top: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: '14'
                        },
                    },
                    color: ['#37a2da', '#F56C6C'],
                    tooltip: {
                        textStyle: {
                            align: 'left'
                        },
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '8%',
                        right: '4%',
                        bottom: '17%',
                        top: '25%',
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        axisLabel: {
                            // rotate: 30,
                            fontSize: 12
                        },
                        textStyle: {
                            color: '#ffffff'
                        },
                        data: ['中心实验室', '监理单位', '施工单位', '指挥部'],
                    },
                    yAxis: {
                        nameRotate: 30,
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                    },
                    series: [
                        {
                            name: '已考勤',
                            type: 'bar',
                            barGap: 0,
                            barWidth: 30,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideTop'
                                }
                            },
                            data: [12, 33, 10, 6]
                        },
                        {
                            name: '未考勤',
                            type: 'bar',
                            barWidth: 30,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideTop'
                                }
                            },
                            data: [45, 34, 35, 6]
                        }
                    ]
                }
            },

        },
        methods: {
            fullScreenFour() {
                this.$refs['fullscreen'].toggle() // recommended
                // this.fullscreen = !this.fullscreen // deprecated
            },
            fullscreenChange(fullscreen) {
                this.fullscreen = fullscreen
            },
            currentWeather() {
                const that = this
                return that.request.currentWeather().then(function (response) {
                    that.weather = response.content
                })
                    .catch(function (error) {
                        that.fetchError = error
                    })
            },
            getGisplus() {
                const that = this
                return that.request.getGisplus().then(function (response) {
                    let xunjian = response.content.xunjian
                    that.jindu = response.content.jdgl
                    that.anquan = xunjian.anquan
                    that.huanbao = xunjian.huanbao
                    that.zhiliang = xunjian.zhiliang
                })
                    .catch(function (error) {
                        that.fetchError = error
                    })
            },
            changeMap(val) {
                let message = {
                    type: 'topbar',  // 类型
                    uri: val,  // 地址
                }
                document.getElementById('gisplusiframe').contentWindow.postMessage(message, 'http://baisha.checcbim.com')
            },
            openNewWindow(url) {
                let iWidth = 800; //弹出窗口的宽度;
                let iHeight = 600; //弹出窗口的高度;
                let iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置;
                let iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;
                javascript:window.open(url, "", "height=" + iHeight + ", width=" + iWidth + ", top=" + iTop + ", left=" + iLeft);
            },
            getCzjd() {
                let that = this
                return that.request.getCzjd().then(function (response) {
                    let data = response.content
                    console.log(data);
                    that.view1_1 = data.gclx
                    that.view1_1_p = {
                        complete: that.view1_1.finshed,
                        list: that.view1_1.name,
                        total_design: that.view1_1.sum,
                        title: '总体工程'
                    }
                    that.view1_2 = data.type_month
                    that.view1_3 = data.status_month
                    that.view1_3_p = {
                        jhwc: that.view1_3.jhwc,
                        month: that.view1_3.month,
                        sjwc: that.view1_3.sjwc,
                        title: '总体进度'
                    }
                })
                    .catch(function (error) {
                        that.fetchError = error
                    })
            },

        }
    }
</script>

<style scoped lang="scss">
    .gisplus-bg {
        width: 100%;
        min-height: 100vh;
        padding-top: 0.5rem;
        background-image: url('../../assets/img/renyuan-bg.png');
        display: flex;
        justify-content: space-between;
        position: relative;

        .gisplus-title {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1rem;
            background-image: url('../../assets/img/renyuan-title.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
            font-size: 0.28rem;
            color: #fff;
            text-align: center;
            line-height: 1rem;

            .gisplus-durationTime {
                position: absolute;
                left: 3.1rem;
                font-size: 0.20rem;
                line-height: 0.5rem;
                color: #a5d63f;
                top: 0;
            }

            .gisplus-titles {
                height: 0.5rem;
                line-height: 0.5rem;
                font-size: 0.22rem;
            }

            .gis-titles-min {
                height: 0.2rem;
                line-height: 0.2rem;
                font-size: 0.14rem;
            }

            .weather {
                position: absolute;
                top: 0;
                right: 2rem;
                font-size: 0.20rem;
                line-height: 0.5rem;
            }
        }
    }

    .gisplus-box {
        width: 100%;
        flex: 1;
    }

    .gisplus-box-title {
        position: relative;
        color: #F8BC38;
        height: 0.4rem;
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 0.16rem;
        line-height: 0.4rem;
        padding: 0 0.2rem;
        background: linear-gradient(to right, rgba(0, 246, 255, 0.3), transparent);
        border-bottom: 2px solid;
        border-image: linear-gradient(to right, #00f6ff, transparent) 30 30;

        .gisplus-box-title-left {
            position: absolute;
            left: 0;
            width: 5px;
            height: 100%;
            background: #00f6ff;
        }

        .gisplus-box-title-jump {
            cursor: pointer;
        }
    }

    .gisplus-box-left {
        width: 5rem;
        min-width: 5rem;
    }

    .gisplus-box-mid {
        width: 100%;
        padding-top: 0.5rem;
    }

    .gisplus-box-right {
        width: 5rem;
        min-width: 5rem;
    }

    .gisplus-iframe {
        width: 100%;
        height: 99%;
    }

    .gisplus-foot {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 0.4rem;
        line-height: 0.4rem;
        background: rgba(0, 0, 0, 0.3);
        width: 100%;
        color: #fff;
    }
</style>
